<template>
  <block>
    <div class="block-content">
      <div class="top">
        <div class="title">
          大生态
        </div>
      </div>
      <div class="middle zoology">
        <v-chart :options="option_1" :styles="styles" />
        <v-chart :options="option_2" :styles="styles" />
      </div>
    </div>
  </block>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import { Block } from './index'
import { zoologyOptionFn } from '../config'

export default {
  name: 'ZoologyBlock',
  components: { Block },
  data() {
    return {
      option_1: {},
      option_2: {},
      styles: {
        width: '50%'
      }
    }
  },
  created() {
    const title_1 = '山水田林湖面积'
    const value_1 = [
      { value: 40, name: '修理养护' },
      { value: 60, name: '巡查' }
    ]
    this.option_1 = zoologyOptionFn(title_1, value_1)

    const title_2 = '水环境治理面积'
    const value_2 = [
      { value: 25, name: '湿地' },
      { value: 20, name: '公园' },
      { value: 25, name: '河流' },
      { value: 30, name: '湖泊' }
    ]

    this.option_2 = zoologyOptionFn(title_2, value_2)
  }
}
</script>

<style lang="scss" scoped>
.middle {
  &.zoology {
    display: flex;
    margin-top: 30px;
  }
}
.echarts {
  width: 50%;
  height: 180px;
}
</style>
